import React from 'react';
import {Link} from 'react-router-dom';
import Icon from '@components/icon';
import './icon-button.less';

class IconButton extends React.Component {
  fClick = () => {
    const {onClick} = this.props;
    (typeof onClick === 'function') && onClick();
  };

  fChildren = () => {
    const {path, icon, text, color} = this.props;
    const style = {};
    if (color) {
      style.color = color;
    }
    const props = {
      className: 'icon-button',
      style
    };
    if (path) {
      props.onClick = this.fClick;
    }
    return (
      <div {...props}>
        <div className='icon-button-icon' style={{backgroundColor: color}}>
          <Icon type={icon} style={{color: 'white'}} />
        </div>
        <span className='icon-button-text'>{text}</span>
      </div>
    )
  };

  render() {
    const {path} = this.props;
    if (path) {
      return (
        <Link to={path} replace>
          {this.fChildren()}
        </Link>
      )
    }
    return this.fChildren();
  }
}

export default IconButton;
